<template>
  <el-col :xs="0" class="box">
      <div class="box1">
          <div class="font"></div>
          <div class="back"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="left"></div>
          <div class="right"></div>

          <i class="i-font"></i>
          <i class="i-back"></i>
          <i class="i-top"></i>
          <i class="i-bottom"></i>
          <i class="i-left"></i>
          <i class="i-right"></i>
      </div>
  </el-col>
</template>

<script lang="ts" setup>

</script >

<style scoped>

.box {
    position: fixed;
    left: 10%;
    bottom: 10%;
    transform: translate(-50%, -50%);
    perspective: 900px;
}

.box1 {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    animation: dh 20s linear infinite;
}

.box .box1 div {
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    color: white;
    transition: 0.6s;
}

.box .box1 .font {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-1.gif');
    transform: translateZ(50px);
    background-size: 100% 100%;
}

.box .box1 .back {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-2.jpg');
    transform: translateZ(-50px) rotateY(180deg);
    background-size: 100% 100%;
}

.box .box1 .right {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-3.gif');
    transform: rotateY(90deg) translateZ(50px);
    background-size: 100% 100%;
}

.box .box1 .left {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-4.jpg');
    transform: rotateY(-90deg) translateZ(50px);
    background-size: 100% 100%;
}

.box .box1 .top {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-5.gif');
    transform: rotateX(90deg) translateZ(50px);
    background-size: 100% 100%;
}

.box .box1 .bottom {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-6.jpg');
    transform: rotateX(-90deg) translateZ(50px);
    background-size: 100% 100%;
}

.box .box1:hover .font {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-7.gif');
    transform: translateZ(100px);
    background-size: 100% 100%;
}

.box .box1:hover .back {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-8.gif');
    transform: translateZ(-100px) rotateY(180deg);
    background-size: 100% 100%;
}

.box .box1:hover .right {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-12.jpg');
    transform: rotateY(90deg) translateZ(100px);
    background-size: 100% 100%;
}

.box .box1:hover .left {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-10.jpg');
    transform: rotateY(-90deg) translateZ(100px);
    background-size: 100% 100%;
}

.box .box1:hover .top {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-11.jpg');
    transform: rotateX(90deg) translateZ(100px);
    background-size: 100% 100%;
}

.box .box1:hover .bottom {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-9.jpg');
    transform: rotateX(-90deg) translateZ(100px);
    background-size: 100% 100%;
}

@keyframes dh {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg)
    }
}

.box .box1 i {
    position: absolute;
    top: 25%;
    left: 25%;
    margin-top: -0px;
    margin-left: -0px;
    width: 50px;
    height: 50px;
}

.box .box1 .i-font {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-13.jpg');
    transform: translateZ(25px);
    background-size: 100% 100%;
}

.box .box1 .i-back {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-14.jpg');
    transform: translateZ(-25px) rotateY(180deg);
    background-size: 100% 100%;
}

.box .box1 .i-right {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-15.jpg');
    transform: rotateY(90deg) translateZ(25px);
    background-size: 100% 100%;
}

.box .box1 .i-left {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-16.gif');
    transform: rotateY(-90deg) translateZ(25px);
    background-size: 100% 100%;
}

.box .box1 .i-top {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-17.jpg');
    transform: rotateX(90deg) translateZ(25px);
    background-size: 100% 100%;
}

.box .box1 .i-bottom {
    background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/MF%2Fmf-18.jpg');
    transform: rotateX(-90deg) translateZ(25px);
    background-size: 100% 100%;
}


</style>